<template>
  <div class="content-area">
    <!-- 筛选卡片 -->
    <div class="filter-card">
      <div class="filter-row">
        <div class="filter-item">
          <div class="filter-label">药剂师姓名</div>
          <el-input
            v-model="filters.pharmacist_name"
            placeholder="请输入药剂师姓名"
            clearable
          />
        </div>
        <div class="filter-item">
          <div class="filter-label">药剂师工号</div>
          <el-input
            v-model="filters.work_id"
            placeholder="请输入药剂师工号"
            clearable
          />
        </div>
        <div class="filter-item">
          <div class="filter-label">所属药房</div>
          <el-select
            v-model="filters.department_id"
            placeholder="请选择药房"
            clearable
          >
            <el-option
              v-for="dept in pharmacyDepartmentOptions"
              :key="dept.value"
              :label="dept.label"
              :value="dept.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <div class="filter-label">职称</div>
          <el-select
            v-model="filters.professional_id"
            placeholder="请选择职称"
            clearable
          >
            <el-option
              v-for="prof in professionalOptions"
              :key="prof.value"
              :label="prof.label"
              :value="prof.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <div class="filter-label">状态</div>
          <el-select
            v-model="filters.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="在职" :value="1" />
            <el-option label="休假" :value="2" />
            <el-option label="离职" :value="3" />
          </el-select>
        </div>
      </div>
      <div class="action-buttons">
        <el-button @click="resetFilters">重置</el-button>
        <el-button type="primary" @click="searchPharmacists">查询</el-button>
        <el-button type="success" @click="showAddPharmacistDialog">
          <el-icon><Plus /></el-icon>
          新增药剂师
        </el-button>
      </div>
    </div>

    <!-- 药剂师表格 -->
    <div class="pharmacist-table">
      <div class="table-header">
        <div class="table-title">药剂师列表</div>
        <div class="table-tools">
          <el-button type="primary" @click="exportData">
            <el-icon><Document /></el-icon>
            导出数据
          </el-button>
          <el-button @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>

      <el-table
        :data="pharmacists"
        style="width: 100%"
        stripe
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="work_id" label="工号" width="100" />
        <el-table-column label="药剂师信息" min-width="180">
          <template #default="{ row }">
            <div class="pharmacist-info">
              <div class="pharmacist-avatar">
                <el-avatar :size="40" :src="row.pharmacist_avatar" />
              </div>
              <div>
                <div>{{ row.pharmacist_name }}</div>
                <div style="font-size: 12px; color: #909399">
                  {{ formatTitle(row.professional_id) }} ·
                  {{ row.department_name }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
          <template #default="{ row }">
            {{ formatSex(row.sex) }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="130" />
        <el-table-column prop="license_number" label="执业证号" width="150" />
        <el-table-column prop="good_at" label="擅长领域" width="180" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="
                row.status === 1
                  ? 'success'
                  : row.status === 2
                  ? 'warning'
                  : 'info'
              "
              size="small"
            >
              {{ formatStatus(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons-cell">
              <el-button size="small" @click="viewPharmacistDetails(row)"
                >详情</el-button
              >
              <el-button
                size="small"
                type="primary"
                @click="editPharmacistHandle(row)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="deletePharmacist(row)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          :page-count="pagination.pageTotal"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增/编辑药剂师对话框 -->
    <el-dialog
      v-model="pharmacistDialog.visible"
      :title="pharmacistDialog.isEdit ? '编辑药剂师信息' : '新增药剂师'"
      width="750px"
      :destroy-on-close="false"
    >
      <el-form
        :model="pharmacistForm"
        label-width="100px"
        :rules="pharmacistRules"
        ref="pharmacistFormRef"
      >
        <div style="display: flex; gap: 20px">
          <div style="flex: 1">
            <!-- 药剂师照片上传 -->
            <el-form-item label="药剂师照片" prop="pharmacist_avatar">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="handleAvatarChange"
              >
                <el-avatar
                  :size="60"
                  :src="pharmacistForm.pharmacist_avatar || defaultAvatar"
                  style="cursor: pointer"
                />
                <div style="font-size: 12px; color: #909399; margin-top: 4px">
                  点击更换
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="药剂师工号" prop="work_id">
              <el-input
                v-model="pharmacistForm.work_id"
                placeholder="请输入药剂师工号"
                :disabled="pharmacistDialog.isEdit"
              />
            </el-form-item>
            <el-form-item label="药剂师姓名" prop="pharmacist_name">
              <el-input
                v-model="pharmacistForm.pharmacist_name"
                placeholder="请输入药剂师姓名"
              />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="pharmacistForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="pharmacistForm.phone"
                placeholder="请输入联系电话"
              />
            </el-form-item>
            <el-form-item label="执业证号" prop="license_number">
              <el-input
                v-model="pharmacistForm.license_number"
                placeholder="请输入执业许可证号"
              />
            </el-form-item>
          </div>
          <div style="flex: 1">
            <el-form-item label="所属药房" prop="department_id">
              <el-select
                v-model="pharmacistForm.department_id"
                placeholder="请选择药房"
              >
                <el-option
                  v-for="dept in pharmacyDepartmentOptions"
                  :key="dept.value"
                  :label="dept.label"
                  :value="dept.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="职称" prop="professional_id">
              <el-select
                v-model="pharmacistForm.professional_id"
                placeholder="请选择职称"
              >
                <el-option
                  v-for="prof in professionalOptions"
                  :key="prof.value"
                  :label="prof.label"
                  :value="prof.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="擅长领域" prop="good_at">
              <el-input
                v-model="pharmacistForm.good_at"
                placeholder="请输入擅长领域（如：中药、西药、制剂等）"
              />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="pharmacistForm.status"
                placeholder="请选择状态"
              >
                <el-option label="在职" :value="1" />
                <el-option label="休假" :value="2" />
                <el-option label="离职" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="账户" prop="username">
              <template v-if="pharmacistDialog.isEdit">
                <div style="line-height: 36px">
                  {{ pharmacistForm.username }}
                </div>
              </template>
              <template v-else>
                <el-input
                  v-model="pharmacistForm.username"
                  placeholder="请输入账户"
                />
              </template>
            </el-form-item>
            <el-form-item
              label="密码"
              prop="userpass"
              v-if="!pharmacistDialog.isEdit"
            >
              <el-input
                v-model="pharmacistForm.userpass"
                placeholder="请输入密码"
                type="password"
              />
            </el-form-item>
          </div>
        </div>
        <el-form-item label="简介" prop="description">
          <el-input
            v-model="pharmacistForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入药剂师简介"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="pharmacistDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitPharmacistForm">确认</el-button>
      </template>
    </el-dialog>

    <!-- 右侧抽屉：药剂师详情 -->
    <el-drawer
      v-model="detailDrawer.visible"
      direction="rtl"
      size="600px"
      with-header
      :destroy-on-close="false"
    >
      <template #header>
        <div class="drawer-custom-header">
          <h3>药剂师详情</h3>
        </div>
      </template>

      <div class="drawer-content-wrapper">
        <!-- 顶部个人信息卡片 -->
        <div class="staff-profile-card">
          <div class="profile-header">
            <el-avatar
              :size="80"
              :src="detailInfo.pharmacist_avatar || defaultAvatar"
              class="profile-avatar"
            />
            <div class="profile-info">
              <h2 class="staff-name">{{ detailInfo.pharmacist_name }}</h2>
              <div class="staff-meta">
                <el-tag type="primary" size="small">
                  {{ formatTitle(detailInfo.professional_id) }}
                </el-tag>
                <span class="work-id">{{ detailInfo.work_id }}</span>
              </div>
              <div class="staff-status">
                <el-tag :type="statusTagType(detailInfo.status)" size="small">
                  {{ formatStatus(detailInfo.status) }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 详细信息区域 -->
        <div class="detail-sections">
          <!-- 基本信息 -->
          <div class="detail-section">
            <div class="section-header">
              <el-icon><User /></el-icon>
              <span>基本信息</span>
            </div>
            <div class="section-content">
              <div class="info-grid">
                <div class="info-item">
                  <label>性别</label>
                  <span>{{ formatSex(detailInfo.sex) }}</span>
                </div>
                <div class="info-item">
                  <label>联系电话</label>
                  <span>{{ detailInfo.phone || "未填写" }}</span>
                </div>
                <div class="info-item">
                  <label>执业证号</label>
                  <span>{{ detailInfo.license_number || "未填写" }}</span>
                </div>
                <div class="info-item">
                  <label>所属药房</label>
                  <span>{{
                    detailInfo.departmentName ||
                    getDepartmentLabel(detailInfo.department_id)
                  }}</span>
                </div>
                <div class="info-item">
                  <label>职称</label>
                  <span class="highlight">{{
                    formatTitle(detailInfo.professional_id)
                  }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 专业信息 -->
          <div class="detail-section">
            <div class="section-header">
              <el-icon><Briefcase /></el-icon>
              <span>专业信息</span>
            </div>
            <div class="section-content">
              <div class="info-item-full">
                <label>擅长领域</label>
                <div class="info-content">
                  {{ detailInfo.good_at || "未填写" }}
                </div>
              </div>
              <div class="info-item-full">
                <label>药剂师简介</label>
                <div class="info-content description-text">
                  {{ detailInfo.description || "暂无简介" }}
                </div>
              </div>
            </div>
          </div>

          <!-- 账户信息 -->
          <div class="detail-section">
            <div class="section-header">
              <el-icon><Key /></el-icon>
              <span>账户信息</span>
            </div>
            <div class="section-content">
              <div class="info-grid">
                <div class="info-item">
                  <label>登录账户</label>
                  <span class="username">{{
                    detailInfo.username || "未设置"
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="drawer-footer">
          <el-button @click="detailDrawer.visible = false">关闭</el-button>
          <el-button type="primary" @click="openEditFromDrawer">
            <el-icon><Edit /></el-icon>
            编辑信息
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import {
  uploadAvatar,
  addPharmacist,
  editPharmacist,
  getDepartmentList,
  getPharmacistProfessionalList,
  getPharmacistPagerDataBySearch,
} from "@/api/api.js";
import { t } from "@wangeditor/editor";

const store = useStore();

const filters = reactive({
  pharmacist_name: "",
  work_id: "",
  department_id: "",
  professional_id: "",
  status: "",
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageTotal: 0,
  total: 0,
});

// 科室选项（只显示药房相关科室）
const pharmacyDepartmentOptions = ref([]);
// 职称选项
const professionalOptions = ref([]);

// 药剂师数据
const pharmacists = ref([]);
const loading = ref(false);

// 对话框相关
const pharmacistDialog = reactive({
  visible: false,
  isEdit: false,
});

// 详情抽屉
const detailDrawer = reactive({
  visible: false,
});

const detailInfo = reactive({
  pharmacist_id: null,
  work_id: "",
  pharmacist_name: "",
  pharmacist_avatar: "",
  professional_id: null,
  sex: null,
  phone: "",
  status: null,
  department_id: null,
  departmentName: "",
  license_number: "",
  good_at: "",
  description: "",
  username: "",
});

// 默认头像读取assets目录下的图片
const defaultAvatar = require("@/assets/img/default-avatar.jpeg");

const pharmacistForm = reactive({
  pharmacist_id: null,
  work_id: "",
  pharmacist_name: "",
  pharmacist_avatar: "",
  professional_id: 4, // 默认药师
  sex: 1,
  phone: "",
  status: 1,
  department_id: "",
  license_number: "",
  good_at: "",
  description: "",
  username: "",
  userpass: "",
});

// 表单验证规则
const pharmacistRules = computed(() => {
  const rules = {
    work_id: [{ required: true, message: "请输入药剂师工号", trigger: "blur" }],
    pharmacist_name: [
      { required: true, message: "请输入药剂师姓名", trigger: "blur" },
    ],
    sex: [{ required: true, message: "请选择性别", trigger: "change" }],
    phone: [
      { required: true, message: "请输入联系电话", trigger: "blur" },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
    department_id: [
      { required: true, message: "请选择药房", trigger: "change" },
    ],
    professional_id: [
      { required: true, message: "请选择职称", trigger: "change" },
    ],
    status: [{ required: true, message: "请选择状态", trigger: "change" }],
    license_number: [
      { required: true, message: "请输入执业证号", trigger: "blur" },
    ],
  };
  if (!pharmacistDialog.isEdit) {
    rules.username = [
      { required: true, message: "请输入账户", trigger: "blur" },
    ];
    rules.userpass = [
      { required: true, message: "请输入密码", trigger: "blur" },
    ];
  }
  return rules;
});

const pharmacistFormRef = ref(null);

const resetFilters = () => {
  Object.keys(filters).forEach((key) => {
    filters[key] = "";
  });
  loadPharmacists();
};

const searchPharmacists = () => {
  pagination.currentPage = 1;
  loadPharmacists();
};

// 加载药房科室信息
const loadPharmacyDepartments = async () => {
  try {
    const res = await getDepartmentList();
    if (res.code == 200 && res) {
      const data = res.data;
      pharmacyDepartmentOptions.value = data
        .filter((dept) => dept.department_type === 5) // 科室类型5是药房科室
        .map((dept) => ({
          value: Number(dept.department_id),
          label: dept.department_name,
        }));
      return;
    }
    const payload = res && res.data ? res.data : res;
    if (payload && payload.code === 200 && Array.isArray(payload.data)) {
      // 过滤出药房相关科室（根据实际业务逻辑调整）
      pharmacyDepartmentOptions.value = payload.data
        .filter((dept) => dept.department_type === 5) //科室类型5是药房科室
        .map((dept) => ({
          value: Number(dept.department_id),
          label: dept.department_name,
        }));
    }
  } catch (e) {
    console.error("加载药房科室失败", e);
    ElMessage.error("加载药房科室失败");
  }
};

// 加载药剂师职称信息
const loadProfessionalTitles = async () => {
  try {
    const res = await getPharmacistProfessionalList();
    if (res.code == 200 && res.data != null) {
      professionalOptions.value = res.data.map((p) => ({
        value: p.professional_id,
        label: p.professional_title,
      }));
      return;
    }
  } catch (e) {
    console.error("加载药剂师职称失败", e);
    ElMessage.error("加载药剂师职称失败");
  }
};

// 加载药剂师列表
const loadPharmacists = async () => {
  const params = {
    pharmacist_name: filters.pharmacist_name,
    work_id: filters.work_id,
    department_id: filters.department_id,
    professional_id: filters.professional_id,
    status: filters.status,
    currentPage: pagination.currentPage,
    pageSize: pagination.pageSize,
  };
  loading.value = true;
  try {
    let res = await getPharmacistPagerDataBySearch(params);
    console.log(res);
    if (res.data != null && res.code == 200) {
      pharmacists.value = res.data.data;
      pagination.pageTotal = res.data.pageTotal;
      pagination.total = res.data.total || 0;
    }
  } catch (e) {
    console.error("加载药剂师列表失败", e);
    ElMessage.error("加载药剂师列表失败");
  } finally {
    loading.value = false;
  }
};

const handleSizeChange = (size) => {
  pagination.pageSize = size;
  loadPharmacists();
};

const handleCurrentChange = (page) => {
  pagination.currentPage = page;
  loadPharmacists();
};

const viewPharmacistDetails = (pharmacist) => {
  Object.assign(detailInfo, {
    pharmacist_id: pharmacist.pharmacist_id ?? null,
    work_id: pharmacist.work_id ?? "",
    pharmacist_name: pharmacist.pharmacist_name ?? "",
    pharmacist_avatar: pharmacist.pharmacist_avatar ?? "",
    professional_id: pharmacist.professional_id ?? null,
    sex: pharmacist.sex ?? 1,
    phone: pharmacist.phone ?? "",
    status: pharmacist.status ?? 1,
    department_id: pharmacist.department_id ?? null,
    departmentName: pharmacist.department_name ?? "",
    license_number: pharmacist.license_number ?? "",
    good_at: pharmacist.good_at ?? "",
    description: pharmacist.description ?? "",
    username: pharmacist.username ?? "",
  });

  if (!detailInfo.departmentName && detailInfo.department_id) {
    detailInfo.departmentName = getDepartmentLabel(detailInfo.department_id);
  }

  detailDrawer.visible = true;
};

const openEditFromDrawer = () => {
  editPharmacistHandle({ ...detailInfo });
  detailDrawer.visible = false;
};

const editPharmacistHandle = (pharmacist) => {
  Object.assign(pharmacistForm, { ...pharmacist, userpass: "" });
  pharmacistDialog.isEdit = true;
  pharmacistDialog.visible = true;
};

const deletePharmacist = (pharmacist) => {
  ElMessageBox.confirm(
    `确定要删除药剂师 ${pharmacist.pharmacist_name} 吗？此操作不可恢复！`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      // 调用删除接口
      pharmacists.value = pharmacists.value.filter(
        (p) => p.pharmacist_id !== pharmacist.pharmacist_id
      );
      ElMessage.success("删除成功");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const beforeAvatarUpload = (file) => {
  const fileExt = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();
  const isValidType = [".jpg", ".jpeg", ".png"].includes(fileExt);
  const isLt2M = file.size / 1024 / 1024 < 4;

  if (!isValidType) {
    ElMessage.error("只支持JPG、JPEG和PNG格式的图片！");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("上传图片大小不能超过2MB！");
    return false;
  }
  return true;
};

const handleAvatarChange = async (params) => {
  try {
    const formData = new FormData();
    formData.append("file", params.file);
    const res = await uploadAvatar(formData);
    if (res.code == 200) {
      pharmacistForm.pharmacist_avatar = res.data;
      ElMessage.success("头像上传成功");
    } else {
      ElMessage.error("头像上传失败");
    }
  } catch (e) {
    ElMessage.error("头像上传失败");
  }
};

const showAddPharmacistDialog = () => {
  Object.assign(pharmacistForm, {
    pharmacist_id: null,
    work_id: "",
    pharmacist_name: "",
    pharmacist_avatar: "",
    professional_id: 4,
    sex: 1,
    phone: "",
    department_id: "",
    status: 1,
    license_number: "",
    good_at: "",
    description: "",
    username: "",
    userpass: "",
  });
  pharmacistDialog.isEdit = false;
  pharmacistDialog.visible = true;
};

const submitPharmacistForm = async () => {
  try {
    await pharmacistFormRef.value.validate();

    const payload = {
      pharmacist_id: pharmacistForm.pharmacist_id,
      work_id: pharmacistForm.work_id,
      pharmacist_name: pharmacistForm.pharmacist_name,
      pharmacist_avatar: pharmacistForm.pharmacist_avatar || defaultAvatar,
      professional_id: Number(pharmacistForm.professional_id),
      sex: Number(pharmacistForm.sex),
      phone: pharmacistForm.phone,
      status: Number(pharmacistForm.status),
      department_id: Number(pharmacistForm.department_id),
      license_number: pharmacistForm.license_number,
      good_at: pharmacistForm.good_at,
      description: pharmacistForm.description,
      username: pharmacistForm.username,
      ...(pharmacistDialog.isEdit ? {} : { userpass: pharmacistForm.userpass }),
    };

    let resp;
    if (pharmacistDialog.isEdit) {
      resp = await editPharmacist(payload);
    } else {
      resp = await addPharmacist(payload);
    }

    const data = resp && resp.data ? resp.data : resp;
    if (
      data &&
      (data.code === 200 || data.success === true || data.status === 200)
    ) {
      ElMessage.success(
        pharmacistDialog.isEdit ? "药剂师信息更新成功" : "药剂师添加成功"
      );
      pharmacistDialog.visible = false;
      await loadPharmacyDepartments();
      loadPharmacists();
    } else {
      const msg = (data && (data.message || data.msg)) || "操作失败";
      ElMessage.error(msg);
    }
  } catch (error) {
    console.error("表单验证失败:", error);
  }
};

const exportData = () => {
  ElMessage.success("数据导出成功");
};

const refreshData = () => {
  loadPharmacists();
  ElMessage.success("数据已刷新");
};

const formatTitle = (professional_id) => {
  const opt = professionalOptions.value.find(
    (p) => Number(p.value) === Number(professional_id)
  );
  if (opt) return opt.label;
  const titles = {
    1: "主任药师",
    2: "副主任药师",
    3: "主管药师",
    4: "药师",
    5: "药士",
  };
  return titles[professional_id] || professional_id;
};

const formatStatus = (status) => {
  const statusMap = {
    1: "在职",
    2: "休假",
    3: "离职",
  };
  return statusMap[status] || status;
};

const formatSex = (sex) => {
  return sex === 1 ? "男" : sex === 2 ? "女" : "";
};

const getDepartmentLabel = (id) => {
  const d = pharmacyDepartmentOptions.value.find(
    (x) => Number(x.value) === Number(id)
  );
  return d ? d.label : id;
};

const statusTagType = (status) =>
  status === 1 ? "success" : status === 2 ? "warning" : "info";

onMounted(async () => {
  await loadPharmacyDepartments();
  await loadProfessionalTitles();
  loadPharmacists();
});
</script>

<style lang="scss" scoped>
.content-area {
  flex: 1;
  padding: 24px;
  background-color: #f5f7fa;
  height: 0; // 添加这行
  min-height: 100%; // 添加这行
  overflow-y: auto; // 确保有这行
}

.filter-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  flex: 1;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

.pharmacist-table {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
}

.table-tools {
  display: flex;
  gap: 12px;
}

.pharmacist-info {
  display: flex;
  align-items: center;
}

.pharmacist-avatar {
  margin-right: 12px;
}

.action-buttons-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.avatar-uploader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .el-avatar {
    border: 1px solid #ebeef5;
    background: #f5f7fa;
  }
}

// 抽屉自定义头部
.drawer-custom-header {
  h3 {
    margin: 0;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }
}

.drawer-content-wrapper {
  padding: 0 20px;
  height: 100%;
  overflow-y: auto;
}

// 个人信息卡片 - 医疗风格渐变
.staff-profile-card {
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.profile-avatar {
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.profile-info {
  flex: 1;
  
  .staff-name {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: white;
  }
  
  .staff-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    
    .work-id {
      font-size: 14px;
      opacity: 0.9;
    }
  }
}

// 详细信息区域
.detail-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
  
  .el-icon {
    color: #9c27b0;
    font-size: 16px;
  }
  
  span {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
}

.section-content {
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    label {
      font-size: 13px;
      color: #909399;
      font-weight: 500;
    }
    
    span {
      font-size: 14px;
      color: #303133;
      font-weight: 500;
      
      &.username {
        color: #9c27b0;
        font-family: 'Courier New', monospace;
      }
      
      &.highlight {
        color: #9c27b0;
        font-weight: 600;
      }
    }
  }
  
  .info-item-full {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    label {
      font-size: 13px;
      color: #909399;
      font-weight: 500;
    }
    
    .info-content {
      font-size: 14px;
      color: #303133;
      line-height: 1.5;
      
      &.description-text {
        background: #f8f9fa;
        padding: 12px;
        border-radius: 6px;
        border-left: 3px solid #9c27b0;
      }
    }
  }
}

// 抽屉底部
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

// 药剂师职称样式
:deep(.el-tag) {
  &.el-tag--primary {
    background-color: #f6ffed;
    color: #9c27b0;
    border-color: #ce81db;
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .drawer-custom-header h3 {
    color: #e0e0e0;
  }
  
  .detail-section {
    background: #2d2d2d;
    border-color: #3d3d3d;
  }
  
  .section-header {
    border-bottom-color: #3d3d3d;
    
    span {
      color: #e0e0e0;
    }
  }
  
  .info-item label {
    color: #a0a0a0;
  }
  
  .info-item span {
    color: #e0e0e0;
  }
  
  .info-content {
    color: #e0e0e0;
    
    &.description-text {
      background: #3d3d3d;
      border-left-color: #9c27b0;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .drawer-content-wrapper {
    padding: 0 16px;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .staff-meta {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .section-content .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .detail-section {
    padding: 16px;
  }
}
</style>